<template>
  <div class="custom-page">
    <div class="serchHeader scale-1px-bottom" >
      <div class="serch_input" @click="goSerch"> 
        <i class="iconfont icon-sousuolan_sousuo"></i>
        <span class="serchText">请输入客户名称/手机号</span> 
      </div>
    </div>
    <div class="list-continer">
      <Tips v-if="listInfo.length && (todayCount || yesterdayCount) " :isTool="false" :title="title" 
      :increase="todayCount" :reduce="yesterdayCount" />
      <van-list
        v-model="loading"
        :loading-text="'正在加载中...'"
        :finished="finished"
        :finished-text="finished && !listInfo.length ? '' : '没有更多了'"
        @load="onLoad"
      >
        <my-custom-item  v-for="(info,index) in listInfo" :key="info.clientId"
          :info="info" :num="index" :disabled="true" :isClassify="false"
          :last="index === listInfo.length - 1"
          @click="itemClickHandler(info)"
        ></my-custom-item>
      </van-list>
    </div>
    <div class="no-data" v-if="!this.listInfo.length && finished">
      <img src="@/assets/img/article/empty_article@2x.png"alt="">
      <p>今日无新增{{ title }}，加油哦~ </p>
    </div>
  </div>
</template>
<script>
import MyCustomItem from './components/MyCustomItem'
import CustomService from 'SERVICE/customService'
import commonService from 'SERVICE/commonService'
import Tips from '@/components/Dynamics/Tips'
import NewestDivider from '@/components/Dynamics/NewestDivider'
import { mapGetters } from 'vuex'

export default {
  components: {
    Tips,
    MyCustomItem,
    NewestDivider
  },
  data: () => ({
    title: '',
    listInfo: [],
    finished: false,
    loading: false,
    page: 1,
    pageSize: 10,
    scrollTop: 0,
    findIndex: 0,
    classifyType: 1,
  }),
  computed: {
    ...mapGetters(['userInfo']),
  },
  created () {
    let param = {
      2: "意向客户",
      3: "留电客户"
    }
    let { type, todayCount, yesterdayCount } = this.$route.query
    if (type) {
      this.type = type
      this.todayCount =  +todayCount
      this.yesterdayCount = +yesterdayCount
      this.classifyType = type
      this.title = param[type]
      document.title = `新增${this.title}`
    }
    let data = window.sessionStorage.getItem('listInfo')
    if (data) { 
      let item = JSON.parse(data)
      this.page = item.page
      this.listInfo = item.listInfo
      this.loading = item.loading
      this.scrollTop = item.scrollTop
      this.finished = item.finished
      this.findIndex = item.findIndex
      this.classifyType = item.classifyType
      window.sessionStorage.removeItem('listInfo')
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$el.querySelector('.list-continer').scrollTop = this.scrollTop
    })
  },
  methods: {
    //到搜索页面
    goSerch () {
      this.$router.push({ name:"serch", query: { type: this.type } })
    },
    cleanCurrentData() {
      this.finished = false
      this.page = 1
      this.listInfo = []
    },
    //获取客户分类列表
    async onLoad() {
      let obj = { current: this.page, size: this.pageSize, type: this.classifyType }
      if (this.$route.query.type) {
        obj.ifHome = 1
        obj.ifToday = 1
      } 
      const result = await CustomService.getCustomerList(obj)
      this.listInfo = this.listInfo.concat(result.records)
      this.findIndex = this.listInfo.findIndex(item => !item.ifToday) - 1
      this.loading = false
      if (result.pages <= this.page) {
        this.finished = true
      } else { 
        this.finished = false
        this.page++
      }
    },
    itemClickHandler(item) {
      let data = {
        page: this.page,
        listInfo: this.listInfo,
        loading: this.loading,
        scrollTop: this.$el.querySelector('.list-continer').scrollTop,
        finished : this.finished,
        findIndex: this.findIndex,
        classifyType: this.classifyType
      }
      window.sessionStorage.setItem('listInfo',JSON.stringify(data))
      let query = ""
      if (item.clientStrangerFlag !== 2) {
      query = { thread: 'thread' }
      } else {
        query = { activityTrack: 'activityTrack' }
      }
      this.$router.push( { path: `/custom/${item.clientId}`, query })
    },
    touchHandler(e) {
      return e.preventDefault()
    },
    goBack () {
      // this.$router.replace({path: '/dynamics'});
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="less" scoped>
.scale-1px-hairline--bottom::after{
  background:#E4E6F0;
}
/deep/ .tips-container .isBottom {
    margin-bottom: 0;
}
.custom-page {
  background: #F7F9FA;
  position: relative;
  .serchHeader {
    width: 100%; 
    background: #fff;
    padding: 10px 16px; 
    overflow: hidden;
    .serch_input { 
      background: #F2F6F7;
      border-radius: 4px;
      height: 36px;
      width: 100%;
      line-height: 36px;
      display: flex;
      align-items: center;
      i {
        color: #969EA8;
        margin: 0 8px 0 12px;
      }
      .serchText {
        font-size:14px;
        color:#969EA8;
      }
    }
  }
  .list-continer {
    width:100%;
    position: relative;
    height: calc(100% - 50px);
    overflow: hidden;
    overflow-y: scroll;
    .van-list {
      padding: 0 16px;
      background: #fff;
    }
  }
  .no-data {
    width: 100%;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -40%);
    font-size: 12px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(153, 153, 153, 1);
    text-align: center;
    height: 17px;
    line-height: 17px;
    img {
      width: 88px;
      height: 88px;
    }
  }
}
</style>
